    <template>
                <div class="user-center">
                        <div class="user-center-top">
                               <h2>用户中心</h2>
                        </div>
                        <div class="user-center-img">
                            <img src="../../static/images/people.png" alt="">
                            <p>大德天成<a href=""><span>[修改密码]</span></a></p>
                            <p>访问时间:2018-8-29 13:45:29</p>
                        </div>
                        <div class="user-center-list">
                                    <div class="my-title">
                                        <em class="img-ico img-ico0"></em>订单中心</div>
                                    <ul class=" content fade in">
                                        <li>我的订单</li>
                                        <li>收货地址</li>
                                        <li>缺货登记</li>
                                    </ul>
                                    <div class="my-title"> <em class="img-ico img-ico1"></em>会员中心</div>
                                    <ul class=" content fade">
                                        <li>用户信息</li>
                                        <li>我的收藏</li>
                                        <li>用户留言</li>
                                        <li>修改密码</li>
                                        <li>我的积分</li>
                                        <li>我的评论</li>
                                    </ul>
                                    <div class="my-title"> <em class="img-ico img-ico2"></em>账户中心</div>
                                    <ul class="content fade ">
                                        <li>我的优惠券</li>
                                        <li>我的团购</li>
                                        <li>跟踪包裹</li>
                                        <li>资金管理</li>
                                    </ul>
                                    <div class="my-title"> <em class="img-ico img-ico3"></em>分销中心</div>
                                    <ul class="content fade">
                                        <li>我的盟友</li>
                                        <li>店铺管理</li>
                                        <li>我的佣金</li>
                                        <li>申请提现</li>
                                    </ul> 

                        </div>
                        <div style="clear:both"></div>
                </div>
    </template>
<script>
import userfooter from './footer';
import userheader from './header';
import '../../static/js/jquery-1.11.3.js';
export default {
  data:function() {
    return {};
  },
  components:{
      'user-footer':userfooter,
      'user-header':userheader,
  },
  mounted(){
       $(".user-center-list").on("click",".my-title",function(){
       
            var $title=$(this);
             $title.next().addClass("in").slideDown(500).siblings(".content").slideUp(500);
        //  $title.next().toggleClass("in").siblings(".content").removeClass("in");
        })
  }
};
</script>

<style scoped>
.fade{
    text-align:center;
    color:gray;
    font-size:12px;
    height:0;
    overflow:hidden;
     /* opacity: 0; 
    transition:"height" 2s linear; */
}
.in{
    height:auto;
    opacity: 1;
}
.fade>li{
    margin-top:10px;
}
.fade>li:hover{
    background:peachpuff;
}
 .my-title{
     position:relative;
     font-size:17px;
     font-weight:bold;
      background:#e5e5e5;
       text-align:center;
       padding:8px 5px;
        border-bottom:1px solid grey;
       
   }
   .img-ico{ 
       position:absolute;
         width:25px;
        height:25px; 
     bottom:5px;
     left:30px;
       background:url(../../static/images/m_i_1.png) no-repeat center center;}
         .img-ico1{ background:url(../../static/images/m_i_2.png) no-repeat center center;}
        .img-ico2{ background:url(../../static/images/m_i_3.png) no-repeat center center;}
        .img-ico3{ background:url(../../static/images/m_i_4.png) no-repeat center center;}
   /* .userinfo-main{
       width:100%;
       height:600px;
       border:1px solid red;
   }  */
   .user-center{
       width:200px;
       /* height:500px; */
    border:1px solid gray;
       float:left;
        margin-top:25px;
       margin-left:158px;
   }
   .user-center-top{
       width:200px;
       height:40px;
       background:black;
       text-align:center;
       color:floralwhite;
       /* vertical-align:center; */
       padding-top:10px;
       font-size:14px;
   }
   .user-center-img>img{
        width:80px;
        height:80px;
        margin-left:65px;
        margin-top:10px;
         border-radius:50%;
   }
   .user-center-img>p:nth-child(2){
       color:red;
       font-size:14px;
       text-align:center;
       margin-top:10px;
   }
   .user-center-img>p:nth-child(2) span{
       color:gray;
       font-size:12px;
       margin-left:5px;
   }
   .user-center-img>p:nth-child(3){
       text-align:center;
       margin-top:10px;
        color:gray;
   }
   .user-center-list{border:0;margin:0;padding:0;
   margin-top:10px;
   cursor:pointer;
   };
</style>
